<style>
    input[type="checkbox"]:disabled {
        background: gray;
    }
</style>
<div class="content">
    <form method="post" action="{{ update_settings_url }}" id="form_notification_settings">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
        <div id="config">
            {% if email_enabled %}
                {% set header = "Notification/Email Settings" %}
            {% else %}
                {% set header = "Notification Settings" %}
            {% endif %}
            <div class="header">
                <h1>{{ header }}</h1>
                {# When adding a new notification setting make sure to add the notification-setting-input or the email-setting-input #}
                <div class="button-group">
                    <div class="button-row">
                        <button type="button" class="notification-setting-button btn" data-selector=".notification-setting-input" onclick="checkAll(this)">Subscribe to all notifications</button>
                        <button type="button" class="notification-setting-button btn" data-selector=".notification-setting-input" onclick="unCheckAll(this)">Unsubscribe from all optional notifications</button>
                        <button type="button" class="notification-setting-button btn" data-selector=".notification-setting-input" onclick="resetNotification(this)">Reset notification settings</button>
                    </div>
                    {% if email_enabled %}
                        <div class="button-row">
                            <button type="button" class="notification-setting-button btn" data-selector=".email-setting-input" onclick="checkAll(this)">Subscribe to all emails</button>
                            <button type="button" class="notification-setting-button btn" data-selector=".email-setting-input" onclick="unCheckAll(this)">Unsubscribe from all optional emails</button>
                            <button type="button" class="notification-setting-button btn" data-selector=".email-setting-input" onclick="resetNotification(this)">Reset email settings</button>
                        </div>
                    {% endif %}
                </div>
            </div>
            <div class="row">
                <div class="heading col-md-4"></div>
                <div class="heading col-md-3">
                    <h2>Notification Settings</h2>
                </div>
                {% if email_enabled %}
                    <div class="heading col-md-5">
                        <h2>Email Settings</h2>
                    </div>
                {% endif %}
            </div>

            <div class="heading">
                <h2>Forum</h2>
                <hr>
            </div>
            <div class="option row">
                <div class="option-desc col-md-4">
                    <label for="forum_enabled">
                        <div class="option-title">New Announcement</div>
                        <div class="option-alt">Alert me when an instructor posts a new announcement</div>
                    </label>
                </div>
                <div class="option-input col-md-3 notification-setting-input"><input type="checkbox" name="announcement" id="announcement" disabled checked></div>
                {% if email_enabled %}
                    <div class="option-input col-md-5 email-setting-input"><input type="checkbox" name="announcement_email" id="announcement_email" disabled checked></div>
                {% endif %}
            </div>

            <div class="option row">
                <div class="option-desc col-md-4">
                    <label for="forum_enabled">
                        <div class="option-title">Reply to My Thread</div>
                        <div class="option-alt">Alert me when a reply is posted in a thread that I created</div>
                    </label>
                </div>
                <div class="option-input col-md-3 notification-setting-input"><input type="checkbox" name="reply_thread" id="reply_thread" disabled checked></div>
                {% if email_enabled %}
                    <div class="option-input col-md-5 email-setting-input"><input type="checkbox" name="reply_thread_email" id="reply_thread_email" disabled checked></div>
                {% endif %}
            </div>

            <div class="option row">
                <div class="option-desc col-md-4">
                    <label for="forum_enabled">
                        <div class="option-title">My Post was Modified</div>
                        <div class="option-alt">Alert me when one of my posts is edited, deleted, or merged</div>
                    </label>
                </div>
                <div class="option-input col-md-3 notification-setting-input"><input type="checkbox" name="my_post_altered" id="my_post_altered" disabled checked></div>
                {% if email_enabled %}
                    <div class="option-input col-md-5 email-setting-input"><input type="checkbox" name="my_post_altered_email" id="my_post_altered_email" disabled checked></div>
                {% endif %}
            </div>

            <div class="option row">
                <div class="option-desc col-md-4">
                    <label for="forum_enabled">
                        <div class="option-title">Reply in Participating Thread</div>
                        <div class="option-alt">Alert me when a reply is posted in a thread in which I also posted</div>
                    </label>
                </div>
                <div class="option-input col-md-3 notification-setting-input"><input type="checkbox" name="reply_in_post_thread" id="reply_in_post_thread" {% if notification_saves['reply_in_post_thread'] %}checked="true"{% endif %}></div>

                {% if email_enabled %}
                    <div class="option-input col-md-5 email-setting-input"><input type="checkbox" name="reply_in_post_thread_email" id="reply_in_post_thread_email" {% if notification_saves['reply_in_post_thread_email'] %}checked="true"{% endif %}></div>
                {% endif %}
            </div>

            <div class="option row">
                <div class="option-desc col-md-4">
                    <label for="forum_enabled">
                        <div class="option-title">Merged Thread</div>
                        <div class="option-alt">Alert me when a thread is merged</div>
                    </label>
                </div>
                <div class="option-input col-md-3 notification-setting-input"><input type="checkbox" name="merge_threads" id="merge_threads" {% if notification_saves['merge_threads'] %}checked="true"{% endif %}></div>
                {% if email_enabled %}
                    <div class="option-input col-md-5 email-setting-input"><input type="checkbox" name="merge_threads_email" id="merge_threads_email" {% if notification_saves['merge_threads_email'] %}checked="true"{% endif %}></div>
                {% endif %}
            </div>

            <div class="option row">
                <div class="option-desc col-md-4">
                    <label for="forum_enabled">
                        <div class="option-title">All New Threads</div>
                        <div class="option-alt">Alert me when a thread is created</div>
                    </label>
                </div>
                <div class="option-input col-md-3 notification-setting-input"><input type="checkbox" name="all_new_threads" id="all_new_threads" {% if notification_saves['all_new_threads'] %}checked="true"{% endif %}></div>
                {% if email_enabled %}
                    <div class="option-input col-md-5 email-setting-input"><input type="checkbox" name="all_new_threads_email" id="all_new_threads_email" {% if notification_saves['all_new_threads_email'] %}checked="true"{% endif %}></div>
                {% endif %}
            </div>

            <div class="option row">
                <div class="option-desc col-md-4">
                    <label for="forum_enabled">
                        <div class="option-title">All New Posts</div>
                        <div class="option-alt">Alert me when a post is created</div>
                    </label>
                </div>
                <div class="option-input col-md-3 notification-setting-input"><input type="checkbox" name="all_new_posts" id="all_new_posts" {% if notification_saves['all_new_posts'] %}checked="true"{% endif %}></div>
                {% if email_enabled %}
                    <div class="option-input col-md-5 email-setting-input"><input type="checkbox" name="all_new_posts_email" id="all_new_posts_email" {% if notification_saves['all_new_posts_email'] %}checked="true"{% endif %}></div>
                {% endif %}
            </div>

            {% if core.getUser().accessFullGrading() %}
                <div class="option row">
                    <div class="option-desc col-md-4">
                        <label for="forum_enabled">
                            <div class="option-title">All Modified Threads & Posts</div>
                            <div class="option-alt">Alert me when a thread/post has been edited, deleted, or undeleted</div>
                        </label>
                    </div>
                    <div class="option-input col-md-3 notification-setting-input"><input type="checkbox" name="all_modifications_forum" id="all_modifications_forum" {% if notification_saves['all_modifications_forum'] %}checked="true"{% endif %}></div>
                    {% if email_enabled %}
                        <div class="option-input col-md-5 email-setting-input"><input type="checkbox" name="all_modifications_forum_email" id="all_modifications_forum_email" {% if notification_saves['all_modifications_forum_email'] %}checked="true"{% endif %}></div>
                    {% endif %}
                </div>
            {% endif %}

            <div class="heading">
                <h2>Grade Inquiry</h2>
                <hr>
            </div>

            <div class="option row">
                <div class="option-desc col-md-4">
                    <label for="forum_enabled">
                        <div class="option-title">Grade Inquiry Submitted</div>
                        {% set notification_setting_text = core.getUser().accessGrading() ? "Alert me when a student that I graded submits a grade inquiry" : "Alert me when my team member or grader makes a grade inquiry on my work" %}
                        <div class="option-alt">{{ notification_setting_text }}</div>
                    </label>
                </div>
                <div class="option-input col-md-3 notification-setting-input"><input type="checkbox" name="new_grade_inquiry" id="new_grade_inquiry" disabled checked></div>
                {% if email_enabled %}
                    <div class="option-input col-md-5 email-setting-input"><input type="checkbox" name="new_grade_inquiry_email" id="new_grade_inquiry_email" disabled checked></div>
                {% endif %}
            </div>

            <div class="option row">
                <div class="option-desc col-md-4">
                    <label for="forum_enabled">
                        <div class="option-title">Grade Inquiry Post</div>
                        {% set notification_setting_text = core.getUser().accessGrading() ? "Alert me when a student posts a followup message on their grade inquiry" : "Alert me when my team member or grader posts a followup message on my grade inquiry" %}
                        <div class="option-alt">{{ notification_setting_text }}</div>
                    </label>
                </div>
                <div class="option-input col-md-3 notification-setting-input"><input type="checkbox" name="new_grade_inquiry_post" id="new_grade_inquiry_post" disabled checked></div>
                {% if email_enabled %}
                    <div class="option-input col-md-5 email-setting-input"><input type="checkbox" name="new_grade_inquiry_post_email" id="new_grade_inquiry_post_email" disabled checked></div>
                {% endif %}
            </div>

            <div class="option row">
                <div class="option-desc col-md-4">
                    <label for="forum_enabled">
                        <div class="option-title">Grade Inquiry Resolved</div>
                        {% set notification_setting_text = core.getUser().accessGrading() ? "Alert me when a student closes their grade inquiry" : "Alert me when a team member or grader resolves my grade inquiry" %}
                        <div class="option-alt">{{ notification_setting_text }}</div>
                    </label>
                </div>
                <div class="option-input col-md-3 notification-setting-input"><input type="checkbox" name="grade_inquiry_resolved" id="grade_inquiry_resolved" disabled checked></div>
                {% if email_enabled %}
                    <div class="option-input col-md-5 email-setting-input"><input type="checkbox" name="grade_inquiry_resolved_email" id="grade_inquiry_resolved_email" disabled checked></div>
                {% endif %}
            </div>

            <div class="option row">
                <div class="option-desc col-md-4">
                    <label for="forum_enabled">
                        <div class="option-title">Grade Inquiry Re-Opened</div>
                        {% set notification_setting_text = core.getUser().accessGrading() ? "Alert me when a student reopens their grade inquiry" : "Alert me when a team member or grader reopens my grade inquiry" %}
                        <div class="option-alt">{{ notification_setting_text }}</div>
                    </label>
                </div>
                <div class="option-input col-md-3 notification-setting-input"><input type="checkbox" name="grade_inquiry_reopened" id="grade_inquiry_reopened" disabled checked></div>
                {% if email_enabled %}
                    <div class="option-input col-md-5 email-setting-input"><input type="checkbox" name="grade_inquiry_reopened_email" id="grade_inquiry_reopened_email" disabled checked></div>
                {% endif %}
            </div>

            <div class="heading">
                <h2>Team</h2>
                <hr>
            </div>

            <div class="option row">
                <div class="option-desc col-md-4">
                    <label for="forum_enabled">
                        <div class="option-title">Team Invitation</div>
                        <div class="option-alt">Alert me when I get an invitation to join a team</div>
                    </label>
                </div>
                <div class="option-input col-md-3 notification-setting-input"><input type="checkbox" name="team_invite" id="team_invite" {% if notification_saves['team_invite'] %}checked="true"{% endif %}></div>
                {% if email_enabled %}
                    <div class="option-input col-md-5 email-setting-input"><input type="checkbox" name="team_invite_email" id="team_invite_email" {% if notification_saves['team_invite_email'] %}checked="true"{% endif %}></div>
                {% endif %}
            </div>

            <div class="option row">
                <div class="option-desc col-md-4">
                    <label for="forum_enabled">
                        <div class="option-title">New Team Member</div>
                        <div class="option-alt">Alert me when a new team member joins my team</div>
                    </label>
                </div>
                <div class="option-input col-md-3 notification-setting-input"><input type="checkbox" name="team_joined" id="team_joined" {% if notification_saves['team_joined'] %}checked="true"{% endif %}></div>
                {% if email_enabled %}
                    <div class="option-input col-md-5 email-setting-input"><input type="checkbox" name="team_joined_email" id="team_joined_email" {% if notification_saves['team_joined_email'] %}checked="true"{% endif %}></div>
                {% endif %}
            </div>

            <div class="option row">
                <div class="option-desc col-md-4">
                    <label for="forum_enabled">
                        <div class="option-title">Team Member Submission</div>
                        <div class="option-alt">Alert me when a team member makes a submission to the gradeable</div>
                    </label>
                </div>
                <div class="option-input col-md-3 notification-setting-input"><input type="checkbox" name="team_member_submission" id="team_member_submission" {% if notification_saves['team_member_submission'] %}checked="true"{% endif %}></div>
                {% if email_enabled %}
                    <div class="option-input col-md-5 email-setting-input"><input type="checkbox" name="team_member_submission_email" id="team_member_submission_email" {% if notification_saves['team_member_submission_email'] %}checked="true"{% endif %}></div>
                {% endif %}
            </div>

            <hr>
            <div class="option row">
                <div class="option-desc col-md-4">
                    <label for="forum_enabled">
                        <div class="option-title">My Actions/Updates</div>
                        <div class="option-alt">Alert me when I perform the actions selected above</div>
                    </label>
                </div>
                <div class="option-input col-md-3 notification-setting-input"><input type="checkbox" name="self_notification" id="self_notification" {% if notification_saves['self_notification'] %}checked="true"{% endif %}></div>
                {% if email_enabled %}
                    <div class="option-input col-md-5 email-setting-input"><input type="checkbox" name="self_notification_email" id="self_notification_email" {% if notification_saves['self_notification_email'] %}checked="true"{% endif %}></div>
                {% endif %}
            </div>

        </div>
    </form>
    <script>
        function checkAll(button) {
            var selector = $(button).data('selector');
            $(selector).children().prop('checked',true);
            $('#form_notification_settings').trigger("change");
        }

        function unCheckAll(button) {
            var selector = $(button).data('selector');
            $(selector).children().filter(':not(:disabled)').prop('checked',false);
            $('#form_notification_settings').trigger("change");
        }

        function resetNotification(button) {
            var defaults = {{ defaults|json_encode|raw }};
            var selector = $(button).data('selector');
            if (selector === '.notification-setting-input') {
                for (d in defaults) {
                    if (defaults.hasOwnProperty(d) && !d.includes("_email")) {
                        $("input[name='" + d + "']").prop('checked',defaults[d]);
                    }
                }
            }
            else if (selector === '.email-setting-input') {
                for (d in defaults) {
                    if (defaults.hasOwnProperty(d) && d.includes("_email")) {
                        $("input[name='" + d + "']").prop('checked',defaults[d]);
                    }
                }
            }
            $('#form_notification_settings').trigger("change");
        }



        $('#form_notification_settings').on("change",function(e) {
            var f = $(this);
            var url = f.attr('action');
            e.preventDefault();
            $.ajax({
                type: "POST",
                data: f.serialize(),
                url: url,
                success: function(data) {
                    try {
                        var json = JSON.parse(data);
                        if(json['status'] == 'fail') {
                            var message ='<div class="inner-message alert alert-error" style="position: fixed;top: 40px;left: 50%;width: 40%;margin-left: -20%;" id="theid"><a class="fas fa-times message-close" onclick="removeMessagePopup(\'theid\');"></a><i class="fas fa-times-circle"></i>' + json['message'] + '</div>';
                        }
                        else {
                            var message ='<div class="inner-message alert alert-success" style="position: fixed;top: 40px;left: 50%;width: 40%;margin-left: -20%;" id="theid"><a class="fas fa-times message-close" onclick="removeMessagePopup(\'theid\');"></a><i class="fas fa-times-circle"></i>' + json['data'] + '</div>';
                        }
                    } catch(err) {
                        var message ='<div class="inner-message alert alert-error" style="position: fixed;top: 40px;left: 50%;width: 40%;margin-left: -20%;" id="theid"><a class="fas fa-times message-close" onclick="removeMessagePopup(\'theid\');"></a><i class="fas fa-times-circle"></i>Error parsing data. Please try again.</div>';
                    }
                    $('#notification-settings').css('display', 'none');
                    $('#messages').empty();
                    $('#messages').append(message);
                }
            });
        });
    </script>
</div>
